<template>
  <view class="pet-opstu">
    <view class="top-b" @click="jumpPage">
      <img class="avatar" :src="props.option.face">
      <view class="name">
        <text>{{ props.option.name }}</text>
        <image :src="`https://img.qumoyugo.com/webimgbg/picopino_icon_sex_new_${props.option.sex}.png`" style="width: 30rpx;height: 30rpx;margin-left:8rpx"></image>
      </view>
      <view class="distance u-center">
        <image src="https://img.qumoyugo.com/webimgbg/picopino_icon_arrow_area_n.svg" style="width:24rpx;height:24rpx;margin-right:4rpx"></image>
        {{getDistance(props.option.distance)}}
      </view>
    </view>
    <view class="text">
      {{ props.option.breedName}}：{{ props.option.age}} <template v-if="props.option.weight">{{ props.option.weight}}kg</template>
    </view>
    <view class="text">
      溜宠时间：{{props.option.strollingTime || 'TA还没有固定时间哦！'}}
    </view>
    <view class="tag-b">
      <view class="tag-i" v-for="tag in petTagList" :key="tag">{{tag || 'TA很神秘呀~'}}</view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  option: {
    type: Object,
    defaulft: () => {}
  }
})
const emit = defineEmits(['jump'])
const jumpPage = () => {
  emit('jump')
  uni.navigateTo({
    url: `/user/petHome?userId=${props.option.customerId}&petId=${props.option.id}`
  })
}
const petTagList = computed(() => {
  const tag = props.option.petTag ? props.option.petTag.split(',') : ['']
  return tag
})
const getDistance = distance => {
  if (!distance) return 0
  return distance < 100 ? distance.toFixed(2) + 'km' : '>99km'
}
</script>

<style scoped lang="scss">
.pet-opstu{
  color: #414141;
  font-size: 24rpx;
  .top-b{
    height: 80rpx;
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    display: flex;
    align-items: center;
  }
  .avatar{
    height: 80rpx;
    width: 80rpx;
    border-radius: 26rpx;
  }
  .name{
    color: #000;
    font-size: 30rpx;
    line-height: 30rpx;
    font-weight: bold;
    padding: 0 20rpx;
    flex: 1;
  }
  .text{
    margin-bottom: 20rpx;
    line-height: 26rpx;
  }
  .tag-b{
    display: flex;
    flex-wrap: wrap;
    height: 40rpx;
    overflow: hidden;
  }
  .tag-i{
    height: 40rpx;
    padding: 9rpx 20rpx;
    line-height: 22rpx;
    font-size: 22rpx;
    color: #000;
    border-radius: 8rpx;
    background: rgba(201, 231, 230, 0.60);
    margin-right: 10rpx;
  }
  .distance{
    border-radius: 1000px;
    background: url(https://img.qumoyugo.com/webimgbg/picopino_icon_map_bg_small.png), lightgray 50% / cover no-repeat;
    background-size: 100%;
    width: 140rpx;
    height: 40rpx;
    line-height: 24rpx;
    padding: 12rpx 0;
    font-size: 24rpx;
  }
}
</style>
